/*
 * This component is temporary until we can pull in `@wordpress/components` and merge https://github.com/Automattic/wp-calypso/pull/34277.
 * See https://github.com/Automattic/wp-calypso/pull/34380.
*/
.woocommerce-muriel-text-control {
	position: relative;
	width: 100%;
	height: 56px;
	margin-top: 14px;
	margin-bottom: 14px;

	border: 1px solid var( --color-primary-20 );
	box-shadow: none;
	box-sizing: border-box;
	border-radius: 2px;
	background: var( --color-surface );

	.text-control__input {
		width: 100%;
		padding: 6px 8px;
	}
	
	.text-control__label {
		display: block;
		margin-bottom: 5px;
	}

	label {
		position: absolute;
		width: auto;
		height: 21px;
		top: 9px;
		right: auto;
		left: 16px;
		display: initial;

		font-size: $font-body-extra-small;
		line-height: 16px;
		color: var( --color-text );
	}
 
	input[type='text'], input[type='email'], input[type='password'] {
		position: absolute;
		width: calc( 100% - 18px - 20px );
		height: 24px;
		right: 20px;
		left: 18px;

		border: 0;
		box-shadow: none;
		padding: 0;

		font-size: $font-body;
		line-height: 24px;
	}

	input[type='text']:focus, input[type='email']:focus, input[type='password']:focus {
		box-shadow: none;
		border: 0;
	}

	&.active {
		box-shadow: 0 0 0 2px var( --color-accent );
		border-color: transparent;

		label {
			color: var( --color-accent );
		}
	}
 
	&.with-value {
		input[type='text'], input[type='email'], input[type='password'] {
			top: 25px;
			color: var( --color-text );
		}
	 }
 
	&.empty {
		.text-control__label {
			display: none;
		}
		input[type='text'], input[type='email'], input[type='password'] {
			top: 15px;
			color: var( --color-primary-50 );
		}
	}

	&.disabled {
		label {
			display: none;
		}
		input[type='text'], input[type='email'], input[type='password'] {
			top: 17px;
			color: var( --color-primary-20 );
			&::placeholder {
				color: var( --color-primary-20 );
				opacity: 1;
			}
		}
	}
}
